import React, { useState } from 'react'
import { Button, Checkbox } from 'antd-mobile'
import zhuan from '../../../public/2.jpg'
import TabBar from '../../componets/tabBar2/Index'
import { useNavigate, useSearchParams } from 'react-router-dom'
function Index() {
  let [flag,setFlag]=useState(true)
  const navigate=useNavigate()
  //接收城市参数
  const [searchParams]=useSearchParams()
  let city = searchParams.get('city') || '上海'
  
  //国内和国际的切换
  const nei=()=>{
    setFlag(true)
  }
  const ji=()=>{
    setFlag(false)
  }
  return (
    <div style={{width:'100vw',height:'100vh'}}>
      <div className='train'>
        <div className='train_text'>
         <h1 onClick={nei} className='nei'> 国内火车</h1>
          <h1 onClick={ji} className='ji'>国际火车</h1>
        </div>
       {
        flag ? 
        <div> 
           <div className='train_text2'>
         <h2 onClick={()=>navigate('/city')}>{city}</h2>
         <img src={zhuan} alt="" style={{width:'30px',height:'30px'}}/>
          <h2 onClick={()=>navigate('/city')}>北京</h2>
        </div>
          <div className='train_text3'>
         <h4>1月10日<span>明天</span></h4>
         <Checkbox><h4>高铁动票</h4></Checkbox>
          <Checkbox><h4>学生票</h4></Checkbox>
         
        </div>
          <Button color='primary' style={{width:'100%',height:'50px'}}>查询车票</Button>
         <div className='train_text4'>
         <span style={{color:'#ccc'}}>上海-北京</span>
          <span style={{color:'#2f6ded'}}>全部清除</span>
         
        </div>
        </div>: <div> 
           <div className='train_text2'>
         <h2>俄罗斯</h2>
         <h2>纽约</h2>
        </div>
          <div className='train_text3'>
         <h4>1月11日<span>明天</span></h4>
         <Checkbox><h4>高铁动票</h4></Checkbox>
          <Checkbox><h4>汽车票</h4></Checkbox>
         
        </div>
          <Button color='primary' style={{width:'100%',height:'50px'}}>查询车票</Button>
         <div className='train_text4'>
         <span style={{color:'#ccc'}}>俄罗斯-纽约</span>
          <span style={{color:'#2f6ded'}}>全部清除</span>
         
        </div>
        </div>
       }

      
      </div>
     <TabBar></TabBar>
    </div>
  )
}

export default Index
